<template>
	<view class="new_circle_detail">
		<h5_header>圈子详情</h5_header>
		<!-- 纯文字或有图片的详情 -->
		<view v-if="circleObj.fileType==''||circleObj.fileType=='1'">
			<view class="opacity c_666 ellipsis fs_28">全部评论（{{count}}）</view>
			<view class="new-circle-item">
				<view class="top">
					<view class="left">
						<img class="avatar" :src="circleObj.headimgurl || 'https://oss-shop.cciinet.com/files/MiniProgram/circle_avatar.png'"
						 alt="">
					</view>
					<view class="right">
						<view class="title">
							<span class="name fs_28 c_333 ellipsis">{{circleObj.nickname}}</span>
							<span class="fs_20 c_999">{{circleObj.topUpdateDate}}</span>
						</view>
						<view class="content c_666 fs_28">
							<p>{{circleObj.content}}</p>
						</view>
						<view v-if="circleObj.fileUrl" class="imgs">
							<view v-for="(v, index) in circleObj.fileUrl" :key="v">
								<img :src="v" alt="" @click.stop="viewPicture(v)">
							</view>
						</view>
					</view>
				</view>
				<view class="operation c_666">
					<p class="address ellipsis"><i class="iconfont icon-dizhi1"></i> <span class="c_999 fs_26">{{circleObj.province}}
							{{circleObj.city}}</span></p>
					<view class="yijiansanlian">
						<!-- #ifdef H5 -->
						<p @click="showShare=true"><i class="iconfont icon-zhuanfa00"></i> <span class="c_999 fs_26">分享</span></p>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<button id="shareBtn" open-type="share">
							<p @click="showShare=true"><i class="iconfont icon-zhuanfa00"></i> <span class="c_999 fs_26">分享</span></p>
						</button>
						<!-- #endif -->
						<p @click="handlePraise(1, circleObj.isCommend?0:1, circleObj.id)">
							<i class="iconfont icon-dianzan" :class="circleObj.isCommend?'praise':''"></i> <span v-if="!circleObj.commendCount"
							 class="c_999 fs_26">点赞</span>
							<span v-else class="c_999 fs_28" :class="circleObj.isCommend?'praise':''">{{circleObj.commendCount}}</span>
						</p>
					</view>
				</view>
			</view>
		</view>
		<!-- 有视频的详情 -->
		<view v-if="circleObj.fileType=='2'">
			<view style="position:sticky">
				<view class="video">
					<video v-show="!showShare" autoplay :src="circleObj.fileUrl" id="video" webkit-playsinline="true" playsinline
					 controls></video>
					<!-- <view class="back" @click="$router.back()"><i class="iconfont icon-back"></i></view> -->
				</view>
				<view class="company_name">
					<img :src="circleObj.headimgurl || 'https://oss-shop.cciinet.com/files/MiniProgram/circle_avatar.png'" alt="">
					<p class="c_333 fs_28 ellipsis">{{circleObj.nickname}}</p>
				</view>
			</view>
			<view class="text_box">
				<p class="text_content c_666 fs_28">{{circleObj.content}}</p>
			</view>
			<view class="time_box fs_22 c_999">
				<span class="">{{circleObj.playCount}}次播放</span>
				<span class="">{{circleObj.topUpdateDate}}</span>
			</view>
			<view class="operation2">
				<view class="btn c_666" @click="handlePraise(1, circleObj.isCommend?0:1, circleObj.id)">
					<i class="iconfont icon-dianzan" :class="circleObj.isCommend?'praise':''"></i>
					<span v-if="!circleObj.commendCount">点赞</span>
					<span v-else :class="circleObj.isCommend?'praise':''">{{circleObj.commendCount}}</span>
				</view>
				<view class="btn c_666" @click="showShare=true">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-pengyouquan"></use>
					</svg>
					分享朋友圈
				</view>
				<!-- #ifdef H5 -->
				<view class="btn c_666" @click="showShare=true"><i class="iconfont icon-weixin"></i>分享微信</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<button id="shareBtn" open-type="share">
					<view class="btn c_666" @click="showShare=true"><i class="iconfont icon-weixin"></i>分享微信</view>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment_list">
			<view class="total c_666 fs_26">全部评论（{{count}}）</view>
			<view v-if="discusses.length>0">
				<view class="item" v-for="(item, index) in discusses" :key="item.id">
					<view class="left">
						<img :src="item.headimgurl || 'https://oss-shop.cciinet.com/files/MiniProgram/circle_avatar.png'" alt="">
					</view>
					<view class="right">
						<view class="title">
							<p class="name ellipsis fs_26">{{item.nickname}}</p>
							<p @click="handlePraise(2, item.isCommend?0:1, item.id, index)" class="p">
								<i class="iconfont icon-dianzan c_666" :class="item.isCommend?'praise':''"></i> <span v-if="!item.commendCount"
								 class="c_999">点赞</span>
								<span v-else class="c_999" :class="item.isCommend?'praise':''">{{item.commendCount}}</span>
							</p>
						</view>
						<view class="content c_666 fs_28">{{item.content}}</view>
						
						<view class="circle_time">
							<view class="fs_22 c_666 time">{{item.createDate | formatInterval}}</view>
							<view class="more" @click="handleCloseItem(index)">
								<view class="i"></view>
								<view class="i"></view>
							</view>
							<view class="black_list" v-if="item.popupStu">
								<view class="main" @click="handlebBlock1(item.userId)">
									<image src="https://oss-shop.cciinet.com/files/MiniProgram/lahei.png" mode="widthFix"></image>
									<view class="span">拉黑</view>
								</view>
								<view class="main" @click="$handleOpenUrl('/pages/shop/report')">
									<image src="https://oss-shop.cciinet.com/files/MiniProgram/jubao.png" mode="widthFix"></image>
									<view class="span">举报</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty tc c_999 fs_26" @click="$refs.textarea.focus()">暂无评论，点击抢沙发</view>
		</view>
		<!-- 评论输入框 -->
		<view class="comment_input_box" v-if="userId">
			<!-- 未登录状态下 聚焦时去登录 -->
			<textarea maxlength="200" placeholder-class="placeholder-class" placeholder="优质评论将会优先展示" @focus="handleFocus" ref="textarea"
			 v-model.trim="txt"></textarea>
			<i v-if="!showBtn" class="iconfont icon-dianzan c_666" :class="circleObj.isCommend?'praise':''" @click=" handlePraise(1, circleObj.isCommend?0:1, circleObj.id)"></i>
			<!-- #ifdef H5 -->
			<i v-if="!showBtn" class="iconfont icon-zhuanfa00 c_666" @click="showShare=true"></i>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button id="shareBtn" open-type="share">
				<i v-if="!showBtn" class="iconfont icon-zhuanfa00 c_666" @click="showShare=true"></i>
			</button>
			<!-- #endif -->
			<view v-if="showBtn" class="publish" :class="txt?'active':''" @click="txt&&handlePublish()">发布</view>
		</view>
		<view class="circle_bf" v-if="option.shareStu==1&&!userId" @touchmove.stop = "" @click="$handleOpenUrl('/pages/login/index')">
			<view class="con1">
				查看全部
			</view>
		</view>
		<!-- 分享弹层 -->
		<view class="back_index" v-if="option.shareStu==1" @click="$handleOpenUrl('/pages/home/index',0)">
			<view>首页</view>
		</view>
		<!-- #ifdef H5 -->
		<h5_share ref="setOpt" :showShare="showShare" @changeShow="changeShow"></h5_share>
		<!-- #endif -->
		
		<!-- 导航悬浮窗 -->
		<view class="nav_float">
			<view class="float" v-if="userId" @click="navStu = !navStu">
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/zhankai.png" mode="widthFix"></image>
				<view class="span">导航</view>
			</view>
			<view class="nav" v-if="navStu">
				<view class="main" @click="$handleOpenUrl('/pages/profile/index',0)">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/wode2.png"  mode="widthFix"></image>
					<view class="span">我的</view>
				</view>
				<view class="main" @click="handlebBlock">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/lahei.png" mode="widthFix"></image>
					<view class="span">拉黑</view>
				</view>
				<view class="main" @click="$handleOpenUrl('/pages/shop/report')">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/jubao.png" mode="widthFix"></image>
					<view class="span">举报</view>
				</view>
				<!-- #ifdef !H5 -->
				<button id="shareBtn" class="main" open-type="share">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg" mode="widthFix"></image>
					<view class="span">分享</view>
				 </button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button id="shareBtn" class="main" @click="showShare=true">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/share1.svg" mode="widthFix"></image>
					<view class="span">分享</view>
				</button>
				<!-- #endif -->
				<view class="main" @click="$handleOpenUrl('/pages/home/index',0)">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/shouye@2x.png" mode="widthFix"></image>
					<view class="span">首页</view>
				</view>
				<view class="main" @click="navStu = false">
					<image src="https://oss-shop.cciinet.com/files/MiniProgram/guanbi.png" style="width: 32upx;" mode="widthFix"></image>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCircleDetail,
		addCommend,
		discussCircle,
		wxConfig,
		addForwardCount,
		getCircleDiscussList,
		addPlayCount
	} from '@/api/circle/index.js'
	import {
		addBlackList,
	} from "@/api/shop/index.js";
	import h5_share from '@/components/h5_share.vue'
	import h5_header from '@/components/h5_header.vue'
	export default {
		components: {
			h5_share,
			h5_header
		},
		data() {
			return {
				txt: '',
				current: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				circleObj: {},
				discusses: [],
				count: 0,
				showShare: false,
				showBtn: false,
				shareMsg: [{
						title: '冻品圈子_冻品人交流论坛_冻品社区',
						des: '冻品圈子是冻品交易港为冻品人打造的信息获取及交流平台，这里有最新、最热、最受关注的行业内容，快来畅所欲言吧！'
					},
					{
						title: '冻品圈子_冻品信息交流_冻品论坛',
						des: '冻品圈子是冻品交易港旗下的主打论坛产品，汇聚冻品行业实时动态，热点话题，为冻品人提供一个便捷的线上互动平台。'
					},
				],
				option: "",
				userId:"",
				navStu:false,
			}
		},
		onLoad(option) {
			this.option = option
			this.getCircleInfo()
			this.getDetailDiscusses()
		},
		onShow() {
			this.userId = uni.getStorageSync("userId")
		},
		onReachBottom() {
			this.loadingType = 1
			this.getDetailDiscusses()
		},
		onShareAppMessage(res) {
			return {
				path: `/pages/circle/detail?id=${this.option.id}&shareStu=1`
			}
		},
		onPageScroll(res) {
			this.discusses.map(v => {
				v.popupStu = false
			})
		},
		methods: {
			changeShow() {
				this.showShare = false
			},
			handleCloseItem(index) {
				this.discusses[index].popupStu = !this.discusses[index].popupStu
			},
			async handleAddPlayCount() {
				let res = await addPlayCount(this.option.id)
				if (res.code != 0) {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			handlebBlock() {
				uni.showModal({
				    title: '确定拉黑该用户',
				    content: '拉黑后此用户不能关注你，也无法给你发送任何消息',
				    success:  res=>{
				        if (res.confirm) {
							addBlackList({blackUserId:this.circleObj.userId,userId:this.userId,status:0}).then(res=>{
								if(res.code===0) {
									uni.showToast({
										icon:"none",
										title:"拉黑成功！"
									})
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									prevPage.$vm.isLoad = 2;
									this.$handleOpenUrl("",2)
								}else{
									uni.showToast({
										icon:"none",
										title:res.msg
									})
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			handlebBlock1(userId) {
				uni.showModal({
				    title: '确定拉黑该用户',
				    content: '拉黑后此用户不能关注你，也无法给你发送任何消息',
				    success:  res=>{
				        if (res.confirm) {
							addBlackList({blackUserId:userId,userId:this.userId,status:0}).then(res=>{
								if(res.code===0) {
									uni.showToast({
										icon:"none",
										title:"拉黑成功！"
									})
									this.current = 1
									this.discusses = []
									this.getDetailDiscusses()
								}else{
									uni.showToast({
										icon:"none",
										title:res.msg
									})
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			handleFocus() {
				if (!uni.getStorageSync("userId")) {
					this.$handleOpenUrl('/pages/login/index')
				} else {
					this.showBtn = true
				}
			},
			async handlePraise(type, status, typeId, index) {
				if (!uni.getStorageSync('userId')) {
					this.$handleOpenUrl("/pages/login/index")
					return
				}
				let res = await addCommend({
					openid: uni.getStorageSync('openid'),
					status,
					type,
					typeId,
					userId: uni.getStorageSync('userId'),
				})
				if (res.code == 0) {
					if (type == 1) {
						if (this.circleObj.isCommend) {
							this.circleObj.isCommend = false
							this.circleObj.commendCount--
						} else {
							this.circleObj.isCommend = true
							this.circleObj.commendCount++
						}
					} else {
						if (this.discusses[index].isCommend) {
							this.discusses[index].isCommend = false
							this.discusses[index].commendCount--
						} else {
							this.discusses[index].isCommend = true
							this.discusses[index].commendCount++
						}
					}
				} else {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			viewPicture(img) {
				var imgArr = [];
				imgArr.push(img);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 圈子信息
			async getCircleInfo() {
				let res = await getCircleDetail({
					circleId: this.option.id,
					openid: uni.getStorageSync('openid'),
					userId: uni.getStorageSync('userId')
				})
				if (res.code == 0) {
					res.data.circle.topUpdateDate = res.data.circle.topUpdateDate.replace(/-/g, "/").split(' ')[0];
					res.data.circle.fileUrl = res.data.circle.fileUrl ? res.data.circle.fileUrl.split('|') : [];
					this.circleObj = res.data.circle
					// #ifdef H5
					let randomIndex = Math.floor(Math.random()*2);
					this.$refs.setOpt.setShareOpt({
						title: this.shareMsg[randomIndex].title,
						desc: this.shareMsg[randomIndex].des,
						img: this.findIcon()
					})
					// #endif
				} else {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			findIcon() {
				if (this.circleObj.fileType == '1') {
					return this.circleObj.fileUrl[0]
				} else if (this.circleObj.fileType == '2') {
					return this.circleObj.fileUrl + '?x-oss-process=video/snapshot,t_0,m_fast,f_png,ar_auto'
				}
			},
			// 评论列表
			async getDetailDiscusses() {
				let res = await getCircleDiscussList({
					circleId: this.option.id,
					current: this.current,
					pageSize: this.pageSize,
					openid: uni.getStorageSync('openid'),
					userId: uni.getStorageSync('userId')
				})
				if (res.code == 0) {
					this.count = res.data.count
					res.data.discusses.map(v => {
						v.createDate = v.createDate.replace(/-/g, "/")
						v.popupStu = false
					})
					console.log(res.data.discusses)
					if (res.data.discusses.length == 0 || res.data.discusses.length < 10) {

					}
					this.current++
					this.discusses = [...this.discusses, ...res.data.discusses]

				} else {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			async handlePublish() {
				let res = await discussCircle({
					content: this.txt,
					circleId: this.circleObj.id,
					openid: uni.getStorageSync('openid'),
					userId: uni.getStorageSync('userId'),
					releaseWay: 1,
				})
				if (res.code == 0) {
					this.txt = ''
					this.showBtn = false
					this.current = 1
					this.discusses = []
					this.getDetailDiscusses()
				} else {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
		},
	}
</script>
<style>
	page{
		background-color: #F2F1F1;
	}
</style>
<style lang="scss" scoped>
	.new_circle_detail {
		height: 100%;
		width: 100%;
		background-color: #F2F1F1;
		.circle_time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.more{
				width: 50upx;
				height: 30upx;
				background: #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 2upx;
				.i{
					width: 8upx;
					height: 8upx;
					border-radius: 50%;
					background-color: #666666;
					margin-left: 10upx;
				}
				.i:first-child{
					margin-left: 0;
				}
			}
			.black_list {
				display: flex;
				position: absolute;
				right: 60upx;
				.main{
					display: flex;
					align-items: center;
					margin-right: 20upx;
					image{
						width: 24upx;
					}
					.span{
						font-size: 20upx;
						margin-left: 5upx;
					}
				}
			}
		}
		.nav_float{
			position: fixed;
			right: 24upx;
			bottom: 156upx;
			z-index: 99;
			.float{
				width: 100upx;
				height: 100upx;
				background: #FEFDFD;
				border: 2upx solid #EEEEEE;
				box-shadow: 0upx 6upx 16upx 0upx rgba(255, 102, 12, 0.2);
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 29upx;
				}
				
				.span{
					font-size: 28upx;
					color: #666666;
				}
			}
			.nav{
				position: fixed;
				right: 142upx;
				bottom: 156upx;
				width: 100upx;
				height: 590upx;
				background: #FEFDFD;
				border: 2upx solid #EEEEEE;
				box-shadow: 0upx 6upx 16upx 0upx rgba(255, 102, 12, 0.2);
				border-radius: 49upx;
				z-index: 9;
				padding-top: 42upx;
				.main{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 24upx;
					image{
						width: 40upx;
					}
					.span{
						font-size: 28upx;
						color: #666666;
					}
				}
			}
		}
		.circle_bot{
			position: fixed;
			bottom: 0;
			height: 84upx;
			width: 100%;
			background-color: rgba(0,0,0,.8);
			line-height: 84upx;
			padding-left: 24upx;
			color: #fff;
		}
		.circle_bf{
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.con1{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				color: #EA5520;
				bottom: 180upx;
				font-size: 36upx;
			}
		}
		.back_index{
			position: fixed;
			right: 0;
			top:30%;
			width: 88upx;
			height: 88upx;
			background: #FFFFFF;
			box-shadow: 0upx 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
			opacity: 0.8;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index:999999999;
			view{
				width: 72upx;
				height: 72upx;
				background: linear-gradient(-13deg, #218EED, #035ABE);
				border-radius: 50%;
				text-align: center;
				line-height: 72upx;
				font-size: 26upx;
				color: #FFFFFF;
			}
		}
		.opacity {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			padding: 0 20upx;
			background-color: #fff;
			box-shadow: 0upx 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
			opacity: 0;
		}

		.new-circle-item {
			border-radius: 8upx;
			background-color: #fff;
			margin: 10upx 10upx 0;

			.top {
				display: flex;

				.left {
					width: 120upx;

					img.avatar {
						width: 80upx;
						height: 80upx;
						margin: 20upx 0 0 20upx;
					}
				}

				.right {
					width: calc(100% - 120upx);
					margin-right: 20upx;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 65upx;

						.p {
							display: flex;
							align-items: center;
							font-size: 26px;
						}

						.name {
							display: inline-block;
							width: 400upx;
						}
					}

					.content {
						p {
							line-height: 1.6;
							white-space: pre-wrap;
							word-break: break-all;
						}
					}

					.imgs {
						display: flex;
						justify-content: flex-start;
						margin-top: 15upx;

						view {
							img {
								width: 190upx;
								height: 190upx;
								margin-left: 5upx;
								object-fit: cover;
							}
						}
					}
				}
			}

			.operation {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 64upx;
				padding: 0 20upx;
				margin-top: 15upx;
				border-top: 1upx solid #EEEEEE;

				.address {
					width: 280upx;
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 26upx;
					}
				}

				.yijiansanlian {
					display: flex;
					align-items: center;

					p {
						width: 120upx;
						margin-left: 10upx;
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 26upx;
							margin-right: 10upx;
						}

						.praise {
							color: #EA5520;
						}
					}
				}
			}
		}

		.video {
			position: relative;
			width: 100%;
			height: 422upx;
			background: #1F3D54;

			video {
				width: 100%;
				height: 100%;
			}

			.back {
				position: absolute;
				top: 25upx;
				left: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50upx;
				height: 50upx;
				background: rgba(0, 0, 0, 0.35);
				border-radius: 50%;
				z-index: 666;

				.iconfont {
					color: #eee;
					font-size: 38upx;
					font-weight: 600;
				}
			}
		}

		.company_name {
			display: flex;
			align-items: center;
			// width: 100%;
			height: 93upx;
			background: #FFFFFF;
			padding: 0 30upx;
			border-bottom: 1upx solid #F2F1F1;

			img {
				width: 56upx;
				height: 56upx;
				border-radius: 50%;
				margin-right: 17upx;
			}
		}

		.text_box {
			background-color: #fff;
			padding: 0 30upx;

			.text_content {
				line-height: 1.6;
				padding: 15upx 0 10upx;
				white-space: pre-wrap;
				word-break: break-all;
			}
		}

		.time_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			background-color: #fff;
		}

		.operation2 {
			height: 150upx;
			background-color: #fff;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 216upx;
				height: 80upx;
				background: #FFFFFF;
				border: 2upx solid #EEEEEE;
				border-radius: 40upx;
				font-size: 30upx;

				.iconfont {
					font-size: 30upx;
					margin-right: 17upx;
				}

				.icon-weixin {
					color: #24db5a;
				}

				.icon {
					height: 0.4rem;
					width: 0.4rem;
					margin-right: 17upx;
				}
			}

			.praise {
				color: #EA5520;
			}
		}

		.comment_list {
			background-color: #F2F1F1;
			padding: 10upx 10upx 150upx;

			.total {
				height: 64upx;
				line-height: 64upx;
				background-color: #fff;
				border-radius: 8upx 8upx 0 0;
				padding: 0 20upx;
			}

			.item {
				display: flex;
				width: 100%;
				background-color: #fff;
				padding-right: 10upx;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 83upx;
					height: 83upx;

					img {
						height: 40upx;
						width: 40upx;
						border-radius: 50%;
					}
				}

				.right {
					width: calc(100% - 100upx);
					border-bottom: 1upx solid #EEEEEE;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 64upx;

						.p {
							display: flex;
							align-items: center;
							font-size: 26upx;
						}

						.name {
							width: 470upx;
						}

						p {
							.iconfont {
								font-size: 24upx;
							}

							.praise {
								color: #EA5520;
							}
						}
					}

					.content {
						word-break: break-all;
						line-height: 1.5;
					}

					.time {
						height: 50upx;
						line-height: 50upx;
					}
				}
			}

			.empty {
				height: 200upx;
				margin-top: 50upx;
			}
		}

		.comment_input_box {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0upx 4upx 16upx 0upx rgba(0, 0, 0, 0.1);

			/deep/.placeholder-class {
				font-size: 28upx;
			}

			textarea {
				width: 526upx;
				height: 46upx;
				font-size: 28upx;
				padding: 10upx 30upx;
				margin: 22upx 0;
				background: #F4F4F4;
				border: 1upx solid #EEEEEE;
				border-radius: 27upx;
				font-size: 30;
				line-break: 1.5;
			}

			.praise {
				color: #EA5520;
			}

			.publish {

				width: 151upx;
				height: 54upx;
				line-height: 54upx;
				text-align: center;
				color: #999999;
				background: #FFFFFF;
				border: 2upx solid #666666;
				border-radius: 27upx;
			}

			.active {
				color: #00428E;
				border: 2upx solid #00428E;
			}

			.iconfont {
				margin-right: 30upx;
				font-size: 40upx;
			}
		}

		.share {
			position: fixed;
			top: 0;
			right: 0;
			z-index: 999999999;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .7);

			img {
				position: fixed;
				right: 80upx;
				top: 20upx;
				width: 50%;
			}
		}
	}
</style>
